<script setup>
import { ref,reactive } from 'vue'
import { RefreshRight, Edit, Delete } from '@element-plus/icons-vue'

// // 表格数据容器，接收后端发来的数据
// const tableData = ref([])

//临时测试数据
const tableData = [
  {
    "id":1,
    "test1":'EF1006'
  },
  {
    "id":2,
    "test1":'EB0113'
  }
]

//表单是否显示，响应式变量
const dialogFormVisible = ref(false)


//文本框宽度
const formLabelWidth = '100px'

// 定义表单属性
const form = reactive({
  POnumber: '',
  location: ''
})
//
const input = ref('')
</script>
<template>
  <!-- 添加表单 -->
  <el-dialog v-model="dialogFormVisible" title="添加产品型号">
    <el-form :model="form">
      <el-form-item label="产品型号" :label-width="formLabelWidth">
        <el-input v-model="form.POnumber" autocomplete="off" />
      </el-form-item>
    </el-form>
    <template #footer>
      <span class="dialog-footer" >
        <el-button type="primary" @click="dialogFormVisible = false">提交</el-button>
        <el-button @click="dialogFormVisible = false">取消</el-button>
      </span>
    </template>
  </el-dialog>

  <el-row style="background-color: white;margin: 20px 10px 0px;border:mintcream;">
    <el-col :span="24">
      <!-- 表单功能栏 -->
      <el-row class="row1">
        <!-- 表格名称 -->
        <el-col :span="3" class="col1"><span>产品型号列表</span></el-col>
        <!-- 添加新设备按钮 -->
        <el-col :span="3" :offset="18">
          <el-button class="addPerson-btn" size="small" type="success" @click="dialogFormVisible=true">
            添加新产品型号
          </el-button>
        </el-col>
      </el-row>
      <el-row class="row2">
        <el-col :span="3">
          <el-button :icon="RefreshRight" size="middle" style="margin:0px 0px 0px 20px">
            刷新
          </el-button>
        </el-col>
        <el-col :span="21" class="col2">
          <el-row>
            <el-col :span="22">
              <el-input style="margin:0px 0px 0px -6px ;" v-model="input" class="input" placeholder="请输入设备名称..."
                clearable />
            </el-col>
            <el-col :span="2">
              <el-button type="success" style="margin:0px 0px 0px -6px ;">搜索</el-button>
            </el-col>
          </el-row>
        </el-col>
      </el-row>
      <!-- 表单主体 -->
      <el-row class="row3" style="width: 96%;margin: 0px auto;">
        <el-col :span="24">
          <!-- data、click需要更改 -->
          <el-table :data="tableData" stripe border style="width:100%">
            <el-table-column label="序号" align="center" prop="id" width="160px" />
            <el-table-column label="产品型号" align="center" prop="test1" width="400px" />
            <el-table-column label="编辑" align="center">
              <template #default="scope">
                <el-button type="primary" @click="" :icon="Edit" size="small">编辑</el-button>
                <el-button type="danger" @click="" :icon="Delete" size="small">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>
<style scoped>
.row1 {
  border-bottom: 1px solid #f7f7f7;
  padding-top: 15px;
  height: 51px;
}

.row2 {
  padding-top: 20px;
}

.row2 .col2 .input {
  border-radius: 0px;
}

.row3 {
  padding-top: 10px;
}

.rwo1 .col1 span {
  font-size: medium;
  font-weight: 900;
  padding-left: 5px;
}

.excel-btn {
  margin-left: 60px;
}

.addPerson-btn {
  margin: 0px 0px 0px 25px;
}
.dialog-footer{
  display: block;
  text-align: center;
}
</style>